<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        #myEcharts2 {
            width: 700px;
            height: 600px;
            border: solid 1px red;
            margin: 0 auto;}
        .a-upload {
            padding: 4px 10px;
            height: 30px;
            line-height: 20px;
            position: relative;
            cursor: pointer;
            color: #888;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            *display: inline;
            *zoom: 1
        }
        .a-upload  input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }
        .a-upload:hover {
            color: #444;
            background: #eee;
            border-color: #ccc;
            text-decoration: none
        }

    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Roiton"/>
    <meta name="keywords" content="Responsive, HTML5 template, Retrina Group, Multi Page, Landing, Startup, Business, Company, Corporate, Creative, Freelancers">
    <meta name="author" content="Retrina Group" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- SITE TITLE -->
    <title>软件简介</title>

    <!--  FavIcon  -->
    <link rel="shortcut icon" href="/static/assets/img/favicon.ico">

    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/base.css" />
    <link href="/static/css/history.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/static/css/measure.css"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/static/assets/css/bootstrap.css">
    <!-- Animated  CSS  -->
    <link rel="stylesheet" href="/static/assets/css/animated.css">
    <!-- LineIcon Css -->
    <link rel="stylesheet" href="/static/assets/css/LineIcons.css">
    <!--  Magnific Popup CSS  -->
    <link rel="stylesheet" href="/static/assets/css/magnific-popup.css">
    <!--  Owl Carousel CSS  -->
    <link rel="stylesheet" href="/static/assets/css/owl.carousel.min.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="/static/assets/css/style.css">
</head>

<body data-spy="scroll" data-target="#scrollspy" data-offset="61">


<!-- PRELOADER
============================================= -->
<div id="loader-wrapper">
    <div id="loader">
        <div class="cssload-spin-box"></div>
    </div>
</div>

<!-- PAGE CONTENT
============================================= -->
<div id="page-content" class="page-content demo-01">

    <!-- HEADER
    ============================================= -->
    <header id="header" class="header fixed-top">
        <nav class="navbar navbar-expand-lg navbar-light roiton-menu">
            <div class=container>

                <!-- LOGO NAME -->
                <a href="{% url 'index' %}" class="navbar-brand">Home </a>


                <!-- Responsive Menu Button -->
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-bar-icon"><i class="lni-menu"></i></span>
                </button>

                <!-- Navigation Menu -->
                <div id="navbarSupportedContent" class="collapse navbar-collapse">

                    <ul class="navbar-nav ml-auto">
                        <!-- Dropdown Link -->
                        <!-- Dropdown Link -->

                        <!-- Dropdown Link -->

                        <!-- Dropdown Link -->
                        <li class="nav-item nl-simple"><a class=nav-link href="{% url 'index' %}" target="blank">软件简介</a></li>
                        <li class="nav-item nl-simple"><a class=nav-link href="{% url 'dispatch' %}" target="blank">检测算法</a></li>

                        <!-- Button -->



                    </ul>

                </div>  <!-- End Navigation Menu -->

            </div>  <!-- End container -->

        </nav>  <!-- End navbar -->
    </header>  <!-- END HEADER -->
  <section id="page-hero" class="hero py-6">

        <div class="hero-center">

            <!-- breadcrumb Start -->
            <div class="container">
                <div class="row hero-content text-center">
                        <div class="col-lg-8 mx-auto ">
                        <div class="hero-img">
                            <h1><br></h1>
                            <img class="img-fluid" src="/static/assets/img/检测.jpg" alt="hero-image" />
                        </div>
                    </div>

                    </div>
                </div>
            </div>  <!-- breadcrumb End -->

        </div>  <!-- END HERO-CENTER -->
    </section>   <!-- END HERO -->

    <!-- HERO
    ============================================= -->
    <!--
    <section id="page-hero" class="hero py-6">

        <div class="hero-center">
    -->
            <!-- breadcrumb Start -->
     <!--
    <div class="container">
                <div class="row hero-content text-center">

                    <div class="col-lg-9 mx-auto">
      -->
                     <!--   <h2>XGboost预测</h2> -->
         <!--               <nav aria-label="breadcrumb" class="d-flex flex-column align-items-center text-center">
                            <ol class="breadcrumb mb-0 bg-transparent p-0">
                                <li class="breadcrumb-item"><a class="text-white" href="{% url 'index' %}">Home</a></li>
          -->                      <!--<li class="breadcrumb-item active" aria-current="page">XGboost forecast</li>-->
             <!--               </ol>
                        </nav>
                    </div>
                </div>

            </div>

        </div>
    </section>  -->



    <!-- PORTFOLIO
   ============================================= -->
<div class="services-section pt-120 pb-120">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-12">
                <div class="section-title text-center pb-40">
                    <span><a style="color: red;font-size: 30px"><strong>Transmission</strong></a></span>
                    <h1>数据上传</h1>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-8">
                <div class="services-box">
                    <div class="services-icon">
                        <img src="static/picture/icon-01.png" alt="">
                    </div>
                    <div class="services-content">
                        <h3>图片文件</h3>
                        <p>用于检测获取到的图片，测试程序
                            <br> 上传后返回识别结果
                        </p>
                    </div>
                    <div>
                        <input type="file" id="file" name="myfile" />
                        <input type="button" onclick="UpladFile()" value="上传">
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-8">
                <div class="services-box">
                    <div class="services-icon">
                        <!--                        <a href="#">-->
                        <img src="static/picture/icon-02.png" alt="">
                        <!--                        </a>-->
                    </div>
                    <div class="services-content">
                        <h3>视频文件</h3>
                        <p>选择需要检测的视频文件
                            <br> 上传后返回动态检测视频
                        </p>
                    </div>
                    <div>
                        <input type="file" id="file" name="myfile" />
                        <input type="button" onclick="UpladFile()" value="上传">
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-8">
                <div class="services-box">
                    <div class="services-icon">
                        <!--                        <a href="#">-->
                        <img src="static/picture/icon-03.png" alt="">
                        <!--                        </a>-->
                    </div>
                    <div class="services-content">
                        <h3>实时数据传输</h3>
                        <p>通过摄像头传输的图像
                            <br> 实时反馈当前的状况
                        </p>
                    </div>
                    <div>
                        <input type="button" onclick="" value="实时检测">
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

    <!-- TEAM
    ============================================= -->
<!--
    <section id="team" class="team py-6">
        <div class="container">

            <div class="pricing-section-left-bg-graphics">
                <img src="/static/assets/img/circle3.png" alt="/">
            </div>
-->
            <!-- Title -->
    <!--
            <div >
                <h2>1.3进行预测</h2>
            </div>
            <p>
                经过前面的数据处理之后我们已经得到按照日期划分的192个停车点的图结构属性，接下来我们将使用前一天的结构属性（instrength、outstrength、deposit、indegree、outdegree、PageRank、betweenness）作为特征变量，后一天的deposit即剩余流量作为预测变量进行训练。
            </p>
            <p>
                首先切分训练集和测试集，然后初始化模型的参数，接着进行模型的构建和训练。然后使用模型对测试集进行预测并计算相应的得分和MSE。接着我们采用交叉验证的方法对模型进行参数调优，确定最佳参数。
            </p>
            <p>
                接下来使用最佳参数重新构建模型。最后我们选择特定日期的订单数据，根据停车点数据提取出图结构化属性，将其输入到模型中得到次日的deposit预测值。为了探究预测的合理性，我们对预测值进行分析。将预测数据与前几日平均剩余流量数据进行对比分析（下图），发现depsoit随小时变化趋势大致相同，预测剩余流量比较大的区域为莲前西路、长岸路和龙昌路，剩余流量比较小的区域为仙岳路、长歌路和莲前东路。
            </p>
            <div align="center" style="width:100%">
                <img src="/static/images/x5.png "width="900px" height="300px"></div>
            <p>
                最后我们对模型进行评价分析可得，模型的预测score接近0.875，并且MSE约为24.1。模型预测正确率高，说明模型效果较好。
            </p>
     -->
        </div>  <!-- End container -->
    </section>  <!-- END TEAM -->


    <!-- TESTIMONIAL
   ============================================= -->
<!--
    <section id="testimonial" class="testimonial py-6 text-center">
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-10 column">
-->
                    <!-- Title -->
<!--
            <div style="text-align: center" >
                <h3>
                    1.4预测后潮汐点位示意图
                </h3>
                <div id = "myEcharts2"></div>
            </div> </div>

                <div class="col-md-2 column">
                    <li class="header-btn">
                        <a href="{% url 'heatmap' %}" class="btn " target="_blank">
                            <span>根据时间变化的热力图</span>
                        </a>
                    </li>
                </div>
        </div>
  -->
        </div>  <!-- End container -->
    </section>  <!-- END TESTIMONIAL -->



    <!-- 交互（提交excel文件）
    ============================================= -->
    <section id="about" class="about video py-6">
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column" >
                    <h2 style="text-align: center">
                        1.3交互功能
                    </h2>
                    <div class="alert alert-success alert-dismissable">
                        <p>
                            通过上传如下图所示的excel,csv表格便可以生成未来一天变化后的deposit量(其中 n代表站点号,geohash代表中心点坐标的geohash编码值,in(out)strength代表入(出)强度,in(out)degree代表入(出)度,pagerank代表pagerank值,fence_center代表经纬度坐标)
                        </p>
                    </div> <div align="center" style="width:100%"> <img src="/static/images/xg示例.png" /></div>
                    <form  action="/uploadFile_xgb/" method="post" enctype="multipart/form-data" style="text-align: center">
                        <input type="file" name="myfile" ><br>
                        {% csrf_token %}
                        <input type="submit" value="提交" ><br>
                    </form>
                <div style="text-align: center">
                    {% if flag %}
                        {{ flag }}<br>
                            {% ifequal flag  '上传成功！' %}
                                点击按钮下载结果文件：<br><div>
                            <form action="/downloadFile_xgb/" method="post" style="text-align: center">{% csrf_token %}
                                <input type="text" name="filename" style="text-align: center"><br>
                                <input type="submit" value="下载" style="text-align: center"/>
                            </form>
                            {% endifequal %}
                    {% endif %}<br>


                </div>
            </div>
        </div>
    </section>

    <!-- Return to Top -->
    <a href="javascript:void(0)" class="return-to-top"><i class="lni-chevron-up"></i></a>

</div>



<!--  jquery-3.5.1 -->
<script src="/static/assets/js/jquery-3.5.1.min.js"></script>
<!--  Bootstrap JS  -->
<script src="/static/assets/js/bootstrap.js"></script>
<!--  Easing JS  -->
<script src="/static/assets/js/jquery.easing.min.js"></script>
<!--  Typed JS  -->
<script src="/static/assets/js/typed.js"></script>
<!--  Wow JS  -->
<script src="/static/assets/js/wow.min.js"></script>
<!--  CountTo JS  -->
<script src="/static/assets/js/jquery.countTo.js"></script>
<!--  Isotope JS  -->
<script src="/static/assets/js/isotope.pkgd.min.js"></script>
<!--  Magnific Popup JS  -->
<script src="/static/assets/js/jquery.magnific-popup.min.js"></script>
<!--  Owl Carousel JS  -->
<script src="/static/assets/js/owl.carousel.min.js"></script>
<!--  Custom JS  -->
<script type="text/javascript" src="/static/js/echarts.min.js"></script>
<script src="/static/assets/js/roiton.js"></script>
<script src="/static/js/vue.min.js"></script>
<script src="/static/js/jquery.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=OF5fGEzn9dxVFvnarSdWqdu5UpltidFx"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

<script type="text/javascript">

    var map = new BMap.Map("myEcharts2");          // 创建热力地图实例
    var point = new BMap.Point(118.15455417,24.50516339);
    map.centerAndZoom(point, 13);             // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(); // 允许滚轮缩放
    var points =[
        {"lng":118.1032168,"lat":24.527352,"count":2},
        {"lng":118.10297,"lat":24.5270205,"count":6},
        {"lng":118.1029333,"lat":24.5269695,"count":-8},
        {"lng":118.1030405,"lat":24.526857,"count":39},
        {"lng":118.101761,"lat":24.5212235,"count":-5},
        {"lng":118.0913619,"lat":24.48852763,"count":73},
        {"lng":118.0915037,"lat":24.48775765,"count":33},
        {"lng":118.0939205,"lat":24.4894048,"count":26},
        {"lng":118.0943045,"lat":24.48783733,"count":0},
        {"lng":118.0943045,"lat":24.48783733,"count":6},
        {"lng":118.0963594,"lat":24.46302473,"count":-5},
        {"lng":118.1840119,"lat":24.50045849,"count":-86},
        {"lng":118.0869134,"lat":24.43978555,"count":137},
        {"lng":118.1170899,"lat":24.46898551,"count":25},
        {"lng":118.1149325,"lat":24.47436922,"count":6},
        {"lng":118.1062861,"lat":24.48453628,"count":17},
        {"lng":118.1050395,"lat":24.48292227,"count":1},
        {"lng":118.1239739,"lat":24.47865125,"count":-17},
        {"lng":118.1276436,"lat":24.47659781,"count":-8},
        {"lng":118.1291821,"lat":24.47814252,"count":-28},
        {"lng":118.074334,"lat":24.48627408,"count":-9},
        {"lng":118.0758698,"lat":24.49067261,"count":-3},
        {"lng":118.0802012,"lat":24.49925575,"count":-33},
        {"lng":118.0811032,"lat":24.50150175,"count":-1},
        {"lng":118.0732178,"lat":24.48123543,"count":2},
        {"lng":118.0836372,"lat":24.50525157,"count":33},
        {"lng":118.081052,"lat":24.50134353,"count":-8},
        {"lng":118.1060396,"lat":24.53649883,"count":26},
        {"lng":118.1241579,"lat":24.50497121,"count":82},
        {"lng":118.1250824,"lat":24.50509462,"count":-86},
        {"lng":118.1246245,"lat":24.5090415,"count":76},
        {"lng":118.1475268,"lat":24.48577114,"count":-19},
        {"lng":118.1490391,"lat":24.49143104,"count":-28},
        {"lng":118.1495145,"lat":24.49534657,"count":6},
        {"lng":118.147357,"lat":24.48213625,"count":-30},
        {"lng":118.1543835,"lat":24.50385463,"count":-5},
        {"lng":118.1545542,"lat":24.50516339,"count":-197},
        {"lng":118.1537308,"lat":24.51505907,"count":-125},
        {"lng":118.1534845,"lat":24.51612244,"count":-3},
        {"lng":118.1491523,"lat":24.53038825,"count":-2},
        {"lng":118.1521418,"lat":24.52153663,"count":-19},
        {"lng":118.148138,"lat":24.53281305,"count":0},
        {"lng":118.1468344,"lat":24.53591245,"count":-3},
        {"lng":118.1459754,"lat":24.53808541,"count":-86},
        {"lng":118.1466089,"lat":24.44557099,"count":-19},
        {"lng":118.1480862,"lat":24.44152685,"count":5},
        {"lng":118.1483385,"lat":24.45532523,"count":10},
        {"lng":118.1425643,"lat":24.47819914,"count":-93},
        {"lng":118.1850155,"lat":24.4967146,"count":-459},
        {"lng":118.1610954,"lat":24.51186957,"count":-134},
        {"lng":118.1580168,"lat":24.51875593,"count":-58},
        {"lng":118.1661756,"lat":24.52390339,"count":33},
        {"lng":118.1667309,"lat":24.52737575,"count":588},
        {"lng":118.1698623,"lat":24.51375214,"count":9},
        {"lng":118.1758955,"lat":24.51804119,"count":54},
        {"lng":118.1796622,"lat":24.52236616,"count":-2},
        {"lng":118.1817661,"lat":24.52572506,"count":9},
        {"lng":118.1819802,"lat":24.52700474,"count":-54},
        {"lng":118.1801247,"lat":24.53387018,"count":-2},
        {"lng":118.1798822,"lat":24.53333288,"count":-19},
        {"lng":118.1138674,"lat":24.43353433,"count":2},
        {"lng":118.1153204,"lat":24.43222957,"count":-8},
        {"lng":118.1616685,"lat":24.50464714,"count":248},
        {"lng":118.1627479,"lat":24.50523671,"count":1},
        {"lng":118.1720708,"lat":24.50963894,"count":195},
        {"lng":118.08147,"lat":24.49517687,"count":-178},
        {"lng":118.128983,"lat":24.50193425,"count":2},
        {"lng":118.1392605,"lat":24.50176948,"count":-12},
        {"lng":118.1164174,"lat":24.49950432,"count":101},
        {"lng":118.1138251,"lat":24.49832126,"count":12},
        {"lng":118.1025855,"lat":24.49451978,"count":-17},
        {"lng":118.1094841,"lat":24.50723001,"count":-30},
        {"lng":118.1753316,"lat":24.4666151,"count":-116},
        {"lng":118.1766888,"lat":24.46502084,"count":-30},
        {"lng":118.1831801,"lat":24.47136062,"count":10},
        {"lng":118.1778228,"lat":24.47371703,"count":9},
        {"lng":118.1812512,"lat":24.47244992,"count":-362},
        {"lng":118.171628,"lat":24.460277,"count":-59},
        {"lng":118.165529,"lat":24.4566265,"count":0},
        {"lng":118.1623063,"lat":24.455054,"count":-2},
        {"lng":118.1828418,"lat":24.48504181,"count":2},
        {"lng":118.1834764,"lat":24.48870679,"count":-10},
        {"lng":118.1574702,"lat":24.53842334,"count":8},
        {"lng":118.1593967,"lat":24.54070718,"count":1},
        {"lng":118.1607955,"lat":24.54401075,"count":-86},
        {"lng":118.1080695,"lat":24.49191208,"count":-3},
        {"lng":118.1070089,"lat":24.49972128,"count":-8},
        {"lng":118.1721585,"lat":24.4848605,"count":10},
        {"lng":118.0848316,"lat":24.45926759,"count":2},
        {"lng":118.0872663,"lat":24.46308624,"count":0},
        {"lng":118.0809952,"lat":24.458691,"count":-86},
        {"lng":118.0919515,"lat":24.52003675,"count":-8},
        {"lng":118.0888138,"lat":24.51111553,"count":-2},
        {"lng":118.0925918,"lat":24.51134986,"count":-19},
        {"lng":118.1062693,"lat":24.51209576,"count":5},
        {"lng":118.1173089,"lat":24.51170734,"count":0},
        {"lng":118.1118393,"lat":24.47351509,"count":-18},
        {"lng":118.1201976,"lat":24.51886738,"count":39},
        {"lng":118.1201129,"lat":24.52345374,"count":0},
        {"lng":118.1734974,"lat":24.48115992,"count":15},
        {"lng":118.1684105,"lat":24.4735375,"count":-5},
        {"lng":118.167369,"lat":24.4714235,"count":-8},
        {"lng":118.164607,"lat":24.4798743,"count":-8},
        {"lng":118.1638825,"lat":24.46315275,"count":4},
        {"lng":118.1678844,"lat":24.48389926,"count":1},
        {"lng":118.1056083,"lat":24.51750935,"count":-3},
        {"lng":118.0958217,"lat":24.50810649,"count":0},
        {"lng":118.0977806,"lat":24.50499856,"count":1},
        {"lng":118.0703931,"lat":24.46297931,"count":25},
        {"lng":118.0899107,"lat":24.4665729,"count":-26},
        {"lng":118.0931585,"lat":24.46738901,"count":5},
        {"lng":118.1034013,"lat":24.46996473,"count":2},
        {"lng":118.0695552,"lat":24.46315036,"count":-119},
        {"lng":118.1328923,"lat":24.53089684,"count":-427},
        {"lng":118.1372002,"lat":24.53243914,"count":121},
        {"lng":118.1357754,"lat":24.49881039,"count":-8},
        {"lng":118.136062,"lat":24.497574,"count":68},
        {"lng":118.1909866,"lat":24.49044611,"count":-32},
        {"lng":118.1911188,"lat":24.496771,"count":293},
        {"lng":118.1911107,"lat":24.48656555,"count":-86},
        {"lng":118.1002627,"lat":24.47778893,"count":1},
        {"lng":118.1041035,"lat":24.46645866,"count":-114},
        {"lng":118.1007313,"lat":24.47579064,"count":-130},
        {"lng":118.1854575,"lat":24.48135488,"count":-26},
        {"lng":118.1380001,"lat":24.49306787,"count":-130},
        {"lng":118.1252675,"lat":24.4938935,"count":8},
        {"lng":118.1242847,"lat":24.49293839,"count":-54},
        {"lng":118.1228532,"lat":24.5512632,"count":-133},
        {"lng":118.1231072,"lat":24.55471569,"count":-86},
        {"lng":118.116965,"lat":24.48570845,"count":5},
        {"lng":118.112368,"lat":24.53871872,"count":-126},
        {"lng":118.140142,"lat":24.4382655,"count":-86},
        {"lng":118.1587807,"lat":24.53492218,"count":8},
        {"lng":118.0856975,"lat":24.438891,"count":-134},
        {"lng":118.095235,"lat":24.4354705,"count":2},
        {"lng":118.1216551,"lat":24.42720888,"count":8},
        {"lng":118.0840308,"lat":24.47229127,"count":-8},
        {"lng":118.13541,"lat":24.5235165,"count":1},
        {"lng":118.1360545,"lat":24.52372975,"count":12},
        {"lng":118.0817294,"lat":24.47907691,"count":43},
        {"lng":118.1541175,"lat":24.545071,"count":-59},
        {"lng":118.0907943,"lat":24.53281779,"count":-41},
        {"lng":118.0909571,"lat":24.52830984,"count":-30},
        {"lng":118.0791288,"lat":24.44843901,"count":0},
        {"lng":118.0789881,"lat":24.47743628,"count":28},
        {"lng":118.0787012,"lat":24.45346768,"count":-116},
        {"lng":118.0817225,"lat":24.44697575,"count":1},
        {"lng":118.1324828,"lat":24.515459,"count":53},
        {"lng":118.0792495,"lat":24.46695368,"count":5},
        {"lng":118.1573665,"lat":24.474209,"count":-130},
        {"lng":118.1104357,"lat":24.46053978,"count":1},
        {"lng":118.1318067,"lat":24.5181967,"count":54},
        {"lng":118.1412428,"lat":24.5109425,"count":5},
        {"lng":118.1138034,"lat":24.43420653,"count":56},
        {"lng":118.1146091,"lat":24.43365726,"count":-19},
        {"lng":118.179531,"lat":24.49144733,"count":8},
        {"lng":118.1789506,"lat":24.53179176,"count":-19},
        {"lng":118.1137189,"lat":24.54912961,"count":28},
        {"lng":118.1141002,"lat":24.54874466,"count":10},
        {"lng":118.1364453,"lat":24.52080887,"count":2},
        {"lng":118.134006,"lat":24.53638881,"count":2},
        {"lng":118.096412,"lat":24.53421639,"count":-8},
        {"lng":118.1009371,"lat":24.54380033,"count":-86},
        {"lng":118.0947383,"lat":24.53838594,"count":-26},
        {"lng":118.080416,"lat":24.44411279,"count":1},
        {"lng":118.1035729,"lat":24.54571668,"count":-3},
        {"lng":118.1306958,"lat":24.55775917,"count":-33},
        {"lng":118.1258609,"lat":24.42702037,"count":-3},
        {"lng":118.1353927,"lat":24.4316807,"count":33},
        {"lng":118.1023332,"lat":24.43330653,"count":-10},
        {"lng":118.1572235,"lat":24.446647,"count":-362},
        {"lng":118.1591143,"lat":24.4477945,"count":68},
        {"lng":118.1828815,"lat":24.51188663,"count":6},
        {"lng":118.185117,"lat":24.50636516,"count":-194},
        {"lng":118.1458435,"lat":24.54840515,"count":101},
        {"lng":118.0843726,"lat":24.45148256,"count":-26},
        {"lng":118.1383897,"lat":24.48314198,"count":11},
        {"lng":118.1427014,"lat":24.50643465,"count":-2},
        {"lng":118.1184397,"lat":24.53130806,"count":26},
        {"lng":118.1202087,"lat":24.53257275,"count":-194},
        {"lng":118.1256949,"lat":24.48850547,"count":21},
        {"lng":118.0689915,"lat":24.46783765,"count":101},
        {"lng":118.0698055,"lat":24.47315444,"count":48},
        {"lng":118.1407648,"lat":24.47719645,"count":-3},
        {"lng":118.1659178,"lat":24.4909095,"count":10},
        {"lng":118.1719362,"lat":24.50138614,"count":11},
        {"lng":118.1706035,"lat":24.49730511,"count":11},
        {"lng":118.1677622,"lat":24.49580264,"count":-19},
        {"lng":118.0916167,"lat":24.52284616,"count":0},
        {"lng":118.1358765,"lat":24.53875083,"count":-8},
        {"lng":118.1182273,"lat":24.54326274,"count":28},
        {"lng":118.068686,"lat":24.45717607,"count":2},
        {"lng":118.118453,"lat":24.44256444,"count":0},
    ];
    if(!isSupportCanvas()){
        alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
    }
    //详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md
    //参数说明如下:
    /* visible 热力图是否显示,默认为true
     * opacity 热力的透明度,1-100
     * radius 势力图的每个点的半径大小
     * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
     *	{
            .2:'rgb(0, 255, 255)',
            .5:'rgb(0, 110, 255)',
            .8:'rgb(100, 0, 255)'
        }
        其中 key 表示插值的位置, 0~1.
            value 为颜色值.
     */
    heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
    map.addOverlay(heatmapOverlay);
    heatmapOverlay.setDataSet({data:points,max:100});
    //是否显示热力图
    heatmapOverlay.show();

    function setGradient(){
        /*格式如下所示:
       {
             0:'rgb(102, 255, 0)',
             .5:'rgb(255, 170, 0)',
             1:'rgb(255, 0, 0)'
       }*/
        var gradient = {};
        var colors = document.querySelectorAll("input[type='color']");
        colors = [].slice.call(colors,0);
        colors.forEach(function(ele){
            gradient[ele.getAttribute("data-key")] = ele.value;
        });
        heatmapOverlay.setOptions({"gradient":gradient});
    }
    //判断浏览区是否支持canvas
    function isSupportCanvas(){
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    }
</script>
</body>
</html>